<!-- 流程标准按钮 编辑-->
<template>
    <div>
        <a-form-model
                ref="act_dsn_btnForm"
                :rules="rules"
                :model="act_dsn_btn">
                    <a-form-model-item
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol"
                            label="英文标识"
                            prop="id"
                            required
                            has-feedback>
                            <a-input 
                                v-show="isadd"
                                v-model="act_dsn_btn.id"
                                :maxLength="100"
                                placeholder="请输入英文标识" />
                            <a-lable v-show="!isadd">{{act_dsn_btn.id}}</a-lable>
                    </a-form-model-item>
                    <a-form-model-item
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol"
                            label="分组"
                            prop="group_"
                            required
                            has-feedback>
                            <a-select v-model="act_dsn_btn.group_">
                                <a-select-option :value="1">1组</a-select-option>
                                <a-select-option :value="2">2组</a-select-option>
                                <a-select-option :value="3">3组</a-select-option>
                                <a-select-option :value="4">4组</a-select-option>
                            </a-select>
                    </a-form-model-item>
                    <a-form-model-item
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol"
                            label="按钮文字"
                            prop="text_"
                            required
                            has-feedback>
                                <a-input
                                        allow-clear
                                        v-model="act_dsn_btn.text_"
                                        :maxLength="100"
                                        placeholder="请输入按钮文字" />
                    </a-form-model-item>
                    <a-form-model-item
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol"
                            label="按钮样式"
                            prop="class_"
                            required
                            has-feedback>
                                <a-input
                                        allow-clear
                                        v-model="act_dsn_btn.class_"
                                        :maxLength="100"
                                        placeholder="请输入按钮样式" />
                    </a-form-model-item>
                    <a-form-model-item
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol"
                            label="按钮图标"
                            prop="icon_"
                            required
                            has-feedback>
                                <a-input
                                        allow-clear
                                        v-model="act_dsn_btn.icon_"
                                        :maxLength="100"
                                        placeholder="请输入按钮图标" />
                    </a-form-model-item>
                    <a-form-model-item
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol"
                            label="按钮事件"
                            prop="click_"
                            
                            has-feedback>
                                <a-input
                                        allow-clear
                                        v-model="act_dsn_btn.click_"
                                        :maxLength="100"
                                        placeholder="请输入按钮事件" />
                    </a-form-model-item>
                    <a-form-model-item
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol"
                            label="顺序"
                            prop="indexsort"
                            required
                            has-feedback>
                                <a-input-number v-model="act_dsn_btn.indexsort" :min="1" :max="1000" :precision="0" />
                    </a-form-model-item>
            <a-form-model-item>
                <div class="text-center">
                    <a-button class="m-r-8"  icon="close" @click="onClose">
                        关闭
                    </a-button>
                    <a-button type="primary" @click="onSubmit"  icon="save" :loading="loading">
                        保存
                    </a-button>
                </div>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>
<script>
    import { saveAct_dsn_btn , viewAct_dsn_btn} from '@/api/workflow/act_dsn_btn'

    export default {
        data () {
            return {
                isadd: true, //区分新增和编辑
                labelCol: { span: 6 }, // label宽
                wrapperCol: { span: 18 }, // 组件宽
                loading: false, //按钮显示
                act_dsn_btn: {
                    id: null,
                    group_: null,
                    text_: null,
                    class_: null,
                    icon_: null,
                    click_: null,
                    indexsort: null,
                    enable_: null,
                }, //流程标准按钮信息
                rules: {
                    id: [{ required: true, message: '请输入英文标识', trigger: 'blur' }],
                    group_: [{ required: true, message: '请选择分组', trigger: 'change' }],
                    text_: [{ required: true, message: '请输入按钮文字', trigger: 'blur' }],
                    class_: [{ required: true, message: '请输入按钮样式', trigger: 'blur' }],
                    icon_: [{ required: true, message: '请输入按钮图标', trigger: 'blur' }],
                    indexsort: [{ required: true, message: '请输入顺序', trigger: 'blur' }]
                },
        }
        },
        created () {
        },
        methods: {
            /**
             * 关闭页面
             */
            onClose () {
                this.$emit('close')
            },
            /**
             * 查询流程标准按钮信息
             */
            findAct_dsn_btnById (id) {
                this.resetForm()
                this.isadd=false

                viewAct_dsn_btn(id).then(res => {
                    this.act_dsn_btn = res.data
                })
            },
            /**
             * 重置表单
             */
            resetForm() {
                this.$refs.act_dsn_btnForm.resetFields();
            },
            resetnew() {
                this.isadd=true
            },
            /**
             * 提交表单
             */
            onSubmit() {
                this.$refs.act_dsn_btnForm.validate(valid => {
                    this.loading=true
                    if (valid) {
                        delete this.act_dsn_btn.primaryKey
                        console.log('submit!', this.act_dsn_btn)
                        const savem = this.$message.loading('数据正在保存中...', 0)
                        saveAct_dsn_btn(this.act_dsn_btn).then(res =>{
                            if (res.code !== 0) {
                            setTimeout(savem, 0)
                            this.$message.error('流程标准按钮保存失败')
                            this.loading=false
                        } else {
                            setTimeout(savem, 0)
                            this.$message.success('保存成功')
                            this.$emit('reloadList')
                            this.$emit('close')
                            this.loading=false
                        }
                    })
                    } else {
                        this.loading=false
                        // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
                        // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
                        setTimeout(()=>{
                    const isError= document.getElementsByClassName("has-error");
                const input = isError[0].querySelector('input');
                //console.log(input)
                if(input !== null && input !== 'undefind' && input !== ''){
                    isError[0].querySelector('input').focus() ? isError[0].querySelector('input').focus() : isError[0].querySelector('input').click()
                }else{
                    isError[0].querySelector('textarea').focus()
                }
            },10)
                return false;
            }
            });
            },
    }
    }
</script>
<style scoped>
</style>